<template>
  <section class="sp-aside">
    <menu>
      <h1>天艺传媒</h1>
      <template v-for="(item, $index) in router">
        <a
          href="javascript://"
          :key="$index"
          :class="{ active: $index === Number(routerIndex) }"
          @click="setRouterIndex(item, $index)"
          v-if="item.meta.hidden"
        >
         <!-- <img  v-if="item.meta.icon" src="../../../static/images/Navicon/Map.png" alt="" style=" background-color: rgb(69, 91, 171);"> -->
          <i v-if="item.meta.icon" :class="item.meta.icon"></i>
          {{ item.meta.title }}
        </a>
      </template>
      <!-- <a href="http://bbs.tead.com.cn" target="_blank" key="bbs" v-if="Number(role_id) === 100">
        <i class="el-icon-s-goods"></i>
        论坛
      </a> -->
    </menu>
  </section>
</template>

<script>
import { service } from '@/router'

export default {
  name: 'SpAside',
  props: {},
  components: {},
  data () {
    return {
      router: [],
      routerIndex: 4,
      role_id: 0,
      role_list: ['oaList', 'formMap']
    }
  },
  created () {},
  mounted () {
    this.routerIndex = window.localStorage.getItem('routerIndex') || 4
    // role_id
    const rule = JSON.parse(window.localStorage.getItem('userInfo'))
    if (rule) {
      this.role_id = rule.role_id
    } else {
      window.localStorage.clear()
    }
    this.getRouter()
  },
  destroyed () {},
  methods: {
    // for xiningbus 不过滤hidden
    // 获取router对象
    getRouter () {
      this.router = service[0].children
      // console.log(this.router, this.role_id)
      this.router.forEach(item => {
        // console.log(item)
        if (Number(this.role_id) !== 100) {
          if (item.name === 'oa' || item.name === 'week') {
            item.meta.hidden = true
          } else {
            item.meta.hidden = true
          }
        } else {
          item.meta.hidden = true
        }
      })
      console.log(this.router)
    },
    setRouterIndex (data, index) {
      this.routerIndex = index
      window.localStorage.setItem('routerIndex', index)
      this.$router.push({
        path: this.router[index].path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .sp-aside {
    display: flex;
    align-items: flex-start;
    height: 100%;

    menu,
    nav {
      display: block;
      height: 100%;
    }

    menu {
      flex-shrink: 0;
      width: 92px;
      background: rgb(69, 91, 171);
      margin: 0;
      padding-left: 0;

      h1 {
        position: relative;
        margin: 0;
        width: 100%;
        height: 58px;
        font-size: 0;
        background: #fff;
        // margin-bottom: 10px;

        // &:after {
        //   content: '';
        //   position: absolute;
        //   top: 50%;
        //   left: 50%;
        //   transform: translate(-50%, -50%);
        //   width: 300px;
        //   height: 40px;
        //   background: #fff url('../../assets/images/logo2.png') left center no-repeat;
        //   background-size: auto 40px;
        // }
      }

      a {
        display: block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        padding-left: 15px;
        transition: all .3s;
        box-sizing: border-box;
        color: #fff;

        &.active {
          color: rgb(69, 91, 171);
          background: #fff;
        }
      }
    }

    nav {
      width: 132px;
      background: #fff;
      border-right: 1px solid hsla(0,0%,88.2%,.5);
    }

    ::v-deep .el-menu-item,
    ::v-deep .el-submenu__title {
      height: 40px;
      line-height: 40px;
      color: #343434;
      box-sizing: border-box;
      transition: all .3s;
    }

    ::v-deep .el-submenu .el-menu-item {
      min-width: 132px;
    }

    ::v-deep .el-menu-item.is-active {
      background: #343434;
      color: #fff;
    }

    &__ {

      &desc {
        height: 58px;
        line-height: 58px;
        font-size: 14px;
        padding-left: 20px;
        font-weight: normal;
        margin: 0;
        border-bottom: 1px solid hsla(0,0%,88.2%,.5);
        // box-shadow: 0 1px 4px hsla(0,0%,88.2%,.5);
        box-sizing: border-box;
      }
    }
  }
</style>
